<template>
    <div class="taskDetail" v-loading="loading" element-loading-text="加载中"
        element-loading-background="rgba(250, 250, 250, 0.5)" element-loading-spinner="el-icon-loading"
        >
        <div class="title">基础信息</div>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="descriptions">
                    <div class="descriptions_item">
                        <span>工单编号</span>
                        <span>{{workOrderCode}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>工序名称</span>
                        <span>{{processName}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>报工数配比</span>
                        <span>{{processRate}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>实际开始/结束时间</span>
                        <span>{{actualStartTime}} ~ {{actualEndTime}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>报工权限</span>
                        <span class="permissions">{{processPermissions}}</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="descriptions">
                    <div class="descriptions_item">
                        <span>工序编号</span>
                        <span>{{processCode}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>产品名称</span>
                        <span>{{productName}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>产品编号</span>
                        <span>{{productCode}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>计划开始/结束时间</span>
                        <span>{{startTime}} ~ {{endTime}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>计划数</span>
                        <span>{{planedNumber}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>良品数</span>
                        <span>{{goodProductNumber}}</span>
                    </div>
                    <div class="descriptions_item">
                        <span>不良品数</span>
                        <span>{{badProductNumber}}</span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="title">自定义字段</div>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="descriptions">
                    <div :class="['descriptions_item',item.customFieldMess.fieldType]" v-for="(item,index) in customFieldList" :key="index">
                        <span>{{item.customFieldMess.chineseName}}</span>
                        <template v-if="item.customFieldMess.fieldType == 'selectRadio'">
                            <span class="colorPicker" :style="{
                                    color:computedColor(item.customFieldMess.checkBox,false,0),
                                    backgroundColor:computedColor(item.customFieldMess.checkBox,true,0)
                                    }">{{item.value}}</span>
                        </template>
                        <template v-if="item.customFieldMess.fieldType == 'selectChecked'">
                            <span class="colorPicker" v-for="(i,ind) in JSON.parse(item.value)" :key="ind" :style="{
                                    color:computedColor(item.customFieldMess.checkBox,false,ind),
                                    backgroundColor:computedColor(item.customFieldMess.checkBox,true,ind)
                                    }">{{i}}</span>
                        </template>
                        <template
                            v-if="item.customFieldMess.fieldType == 'picture' || item.customFieldMess.fieldType == 'upload'">
                            <div class="imgContainer">
                                <el-image v-for="(i,ind) in JSON.parse(item.value)" style="width: 100px; height: 100px"
                                    fit="scale-down" :src="$global.uploadUrl + i.url"
                                    :preview-src-list="srcList(JSON.parse(item.value))">
                                </el-image>
                            </div>
                        </template>
                        <template v-if="item.customFieldMess.fieldType != 'selectRadio' && 
                                item.customFieldMess.fieldType != 'selectChecked' &&
                                item.customFieldMess.fieldType != 'picture' &&
                                item.customFieldMess.fieldType != 'upload'">
                            <span>{{item.value}}</span>
                        </template>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {
        missionDetail
    } from '@/api/produceController'
    export default {
        data() {
            return {
                workOrderCode: '',
                processName: '',
                processRate: '',
                actualStartTime: '',
                actualEndTime: '',
                processPermissions: '',
                processCode: '',
                productName: '',
                productCode: '',
                startTime: '',
                endTime: '',
                planedNumber: '',
                goodProductNumber: '',
                badProductNumber: '',
                customFieldList: [],
                loading: false,
            }
        },
        computed: {
            computedColor() {
                return (checkBox, flag, ind) => {
                    let parseCheckBox = JSON.parse(checkBox)
                    let rgbaAttr = parseCheckBox[ind].color.match(/[\d.]+/g);
                    return flag ? `rgb(${rgbaAttr[0]},${rgbaAttr[1]},${rgbaAttr[2]},0.1)` :
                        `rgb(${rgbaAttr[0]},${rgbaAttr[1]},${rgbaAttr[2]})`
                }
            },
            srcList() {
                return arr => {
                    let list = []
                    list = arr.map(i => this.$global.uploadUrl + i.url)
                    return list
                }
            }
        },
        mounted() {
            this.getMissionDetail({
                id: this.$route.query.id
            })
        },
        methods: {
            getMissionDetail(data) {
                this.loading = true
                missionDetail(data).then(res => {
                    if (res.code == 200) {
                        this.workOrderCode = res.data.workOrderCode
                        this.processName = res.data.processName
                        this.processRate = res.data.processRate
                        this.actualStartTime = res.data.actualStartTime
                        this.actualEndTime = res.data.actualEndTime
                        this.processPermissions = res.data.processPermissions
                        this.processCode = res.data.processCode
                        this.productName = res.data.productName
                        this.productCode = res.data.productCode
                        this.startTime = res.data.startTime
                        this.endTime = res.data.endTime
                        this.planedNumber = res.data.planedNumber
                        this.goodProductNumber = res.data.goodProductNumber
                        this.badProductNumber = res.data.badProductNumber
                        this.customFieldList = res.data.customFieldVos
                    }
                    this.loading = false
                })
            },
        }
    }
</script>

<style lang="less" scoped>
    .taskDetail {
        padding: 20px;
        overflow: auto;

        .title {
            font-size: 18px;
            color: #1f273d;
        }

        .descriptions {
            .descriptions_item {
                white-space: nowrap;

                span:nth-child(1) {
                    display: inline-block;
                    width: 120px;
                    text-align: right;
                    margin: 10px 20px 10px 0;
                    color: #8e98ae;
                    font-size: 12px;
                }

                span:nth-child(2) {
                    font-size: 12px;
                    color: #1f273d;
                    white-space: nowrap;
                }

                .colorPicker {
                    font-size: 13px;
                    border-radius: 3px;
                    padding: 0 7px;
                    margin-right: 4px;
                }

                .permissions {
                    display: inline-block;
                    width: 300px;
                    white-space: normal !important;
                    vertical-align: middle;
                }
            }

            .descriptions_item.picture,
            .descriptions_item.upload {
                display: flex;

                span:nth-child(1) {
                    flex-shrink: 0;
                }
            }

            .imgContainer {
                display: flex;
                flex-shrink: 0;
                width: 330px;
                flex-wrap: wrap;

                /deep/ .el-image {
                    margin-right: 10px;
                    flex-shrink: 0;
                }
            }

            /deep/ .el-image {
                vertical-align: top;
            }
        }
    }
</style>